<template>
	<view class="content">
		<view class="one-infor-box">
			<view class="one-infor">
				<view>姓名</view>
				<input type="text" v-model="username" placeholder-style="color:#CCCCCC" placeholder="請輸入姓名">
			</view>
			<view class="one-infor">
				<view>身份證號</view>
				<input type="text" v-model="id_card" placeholder-style="color:#CCCCCC" placeholder="請輸入身份證號">
			</view>
		</view>
		<view class="one-infor-box">
			<view class="one-infor">
				<view>銀行卡號</view>
				<input type="text" v-model="bank_code" placeholder-style="color:#CCCCCC" placeholder="請輸入銀行卡號">
			</view>
			<view class="one-infor">
				<view>銀行名稱</view>
				<input type="text" v-model="bank_name" placeholder-style="color:#CCCCCC" placeholder="請輸入銀行名稱">
			</view>
			<view class="one-infor">
				<view>開戶支行</view>
				<input type="text" v-model="sub_bank_name" placeholder-style="color:#CCCCCC" placeholder="請輸入開戶支行名稱">
			</view>
		</view>
		<view class="btn" @click="addCardOk">確認添加</view>
	</view>
</template>

<script>
	import { addCard } from '../../../request/api.js'
	export default {
		data() {
			return {
				username:'',
				id_card:'',
				bank_code:'',
				bank_name:'',
				sub_bank_name:''
			};
		},
		methods:{
			async addCardOk(){
				if(!this.username){
					uni.showToast({
						title: '請填寫姓名',
						icon: 'none'
					})
					return
				}
				if(!this.id_card){
					uni.showToast({
						title: '請填寫身份證號',
						icon: 'none'
					})
					return
				}
				if(!this.bank_code){
					uni.showToast({
						title: '請填寫銀行卡號',
						icon: 'none'
					})
					return
				}
				if(!this.bank_name){
					uni.showToast({
						title: '請填寫所屬銀行',
						icon: 'none'
					})
					return
				}
				if(!this.sub_bank_name){
					uni.showToast({
						title: '請填寫所屬支行',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:'添加中...'
				})
				let res=await addCard({
					username:this.username,
					id_card:this.id_card,
					bank_code:this.bank_code,
					bank_name:this.bank_name,
					sub_bank_name:this.sub_bank_name
				})
				if(res.code==1){
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
					uni.navigateBack()
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
		.content{
			width:702rpx;margin-left:auto;margin-right:auto;
			padding-top:24rpx;
			.one-infor-box{
				width:100%;padding:0 24rpx;
				box-sizing: border-box;border-radius: 15rpx;
				box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				margin-bottom:24rpx;
				.one-infor{
					width:100%;height:90rpx;display: flex;
					align-items: center;justify-content: space-between;
					border-bottom:1px solid #F0F0F0;font-size:30rpx;
					color:#040404;
					input{
						text-align: right;font-size:30rpx;
					}
					&:last-child{
						border:none;
					}
				}
			}
			.btn{
				width:650rpx;height:98rpx;
				background-color:#040404;
				display: flex;align-items: center;
				justify-content: center;
				border-radius: 98rpx;font-size:36rpx;
				color:#Ffffff;position: fixed;
				bottom:50rpx;left:50rpx;
			}
		}
	}
</style>
